<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fastmsg</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" th:href="@{css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{css/main.css}"/>
    <link rel="stylesheet" th:href="@{css/common.css}"/>
    <link rel="stylesheet" th:href="@{css/cssreset-min.css}"/>
    <link rel="stylesheet" th:href="@{css/fastmsg.css}"/>

    <script type="text/javascript" th:src="@{js/jquery-2.1.3.min.js}"></script>
    <script type="text/javascript" th:src="@{js/amazeui.min.js}"></script>
    <script type="text/javascript" th:src="@{js/zUI.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery.slimscroll.js}"></script>
    <script type="text/javascript" th:src="@{js/util.js}"></script>
    <script type="text/javascript" th:src="@{js/wechat.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery.emoticons.js}"></script>
    <script type="text/javascript" th:src="@{js/fastmsg.js}"></script>
    <script type="text/javascript" th:src="@{js/cookie.js}"></script>
</head>

<body>
<div class="box">
    <div class="wechat">
        <div class="sidestrip">
            <div class="am-dropdown" data-am-dropdown>
                <!--头像插件-->
                <div class="own_head am-dropdown-toggle"><img th:src="@{images/own_head.jpg}" alt=""/></div>
                <div class="am-dropdown-content">
                    <div class="own_head_top">
                        <div class="own_head_top_text">
                            <p class="own_name">彭于晏丶plus<img th:src="@{images/icon/head.png}" alt=""/></p>
                            <p class="own_numb">微信号：jsk8787682</p>
                        </div>
                        <img th:src="@{images/own_head.jpg}" alt=""/>
                    </div>
                    <div class="own_head_bottom">
                        <p><span>地区</span>江西 九江</p>
                        <div class="own_head_bottom_img">
                            <a href=""><img th:src="@{images/icon/head_1.png}"/></a>
                            <a href=""><img th:src="@{images/icon/head_2.png}"/></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--三图标-->
            <div class="sidestrip_icon">
                <a id="si_1" th:style="@{background: url(images/icon/head_2_1.png) no-repeat;}"></a>
                <a id="si_2"></a>
                <a id="si_3"></a>
            </div>

            <!--底部扩展键-->
            <div id="doc-dropdown-justify-js">
                <div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
                    <div class="sidestrip_bc am-dropdown-toggle"></div>
                    <ul class="am-dropdown-content" style="">
                        <li>
                            <a href="#"
                               data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
                            <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                                <div class="am-modal-dialog">
                                    <div class="am-modal-hd">Modal 标题
                                        <a href="javascript: void(0)" class="am-close am-close-spin"
                                           data-am-modal-close>&times;</a>
                                    </div>
                                    <div class="am-modal-bd">
                                        Modal 内容。本 Modal 无法通过遮罩层关闭。
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li><a href="#">备份与恢复</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--聊天列表-->
        <div class="middle on">
            <div class="wx_search">
                <input type="text" placeholder="搜索"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="user_list"></ul>
            </div>
        </div>

        <!--好友列表-->
        <div class="middle">
            <div class="wx_search">
                <input type="text" placeholder="搜索"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="friends_list">
                    <li>
                        <p>新的朋友</p>
                        <div class="friends_box" th:onclick="clickUserCard('新的朋友')">
                            <div class="user_head"><img th:src="@{images/head/1.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">新的朋友</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>群聊</p>
                        <div class="friends_box">
                            <div class="user_head"><img th:src="@{images/head/2.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">CEO群</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img th:src="@{images/head/2.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">兰博基尼购车群</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>A</p>
                        <div class="friends_box" th:onclick="clickUserCard('hahah')">
                            <div class="user_head"><img th:src="@{images/head/3.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">hahah</p>
                            </div>
                        </div>
                        <div class="friends_box" th:onclick="clickUserCard('eqwewqe')">
                            <div class="user_head"><img th:src="@{images/head/4.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">eqwewqe</p>
                            </div>
                        </div>
                        <div class="friends_box" th:onclick="clickUserCard('毛毛')">
                            <div class="user_head"><img th:src="@{images/head/5.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">毛毛</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>B</p>
                        <div class="friends_box" th:onclick="clickUserCard('苏笑言')">
                            <div class="user_head"><img th:src="@{images/head/6.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">苏笑言</p>
                            </div>
                        </div>
                        <div class="friends_box" th:onclick="clickUserCard('往事不再提')">
                            <div class="user_head"><img th:src="@{images/head/7.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">往事不再提</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>C</p>
                        <div class="friends_box" th:onclick="clickUserCard('夏继涛')">
                            <div class="user_head"><img th:src="@{images/head/8.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">夏继涛</p>
                            </div>
                        </div>
                        <div class="friends_box" th:onclick="clickUserCard('早安无恙')">
                            <div class="user_head"><img th:src="@{images/head/9.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">早安无恙</p>
                            </div>
                        </div>
                        <div class="friends_box" th:onclick="clickUserCard('王鹏')">
                            <div class="user_head"><img th:src="@{images/head/10.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">王鹏</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>D</p>
                        <div class="friends_box" th:onclick="clickUserCard('涨了潮了')">
                            <div class="user_head"><img th:src="@{images/head/11.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">涨了潮了</p>
                            </div>
                        </div>
                        <div class="friends_box" th:onclick="clickUserCard('资')">
                            <div class="user_head"><img th:src="@{images/head/12.jpg}"/></div>
                            <div class="friends_text">
                                <p class="user_name">资</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--程序列表-->
        <div class="middle">
            <div class="wx_search">
                <input type="text" placeholder="搜索收藏内容"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="icon_list">
                    <li class="icon_active">
                        <div class="icon"><img th:src="@{images/icon/icon.png}" alt=""/></div>
                        <span>全部收藏</span>
                    </li>
                    <li>
                        <div class="icon"><img th:src="@{images/icon/icon1.png}" alt=""/></div>
                        <span>链接</span>
                    </li>
                    <li>
                        <div class="icon"><img th:src="@{images/icon/icon2.png}" alt=""/></div>
                        <span>相册</span>
                    </li>
                    <li>
                        <div class="icon"><img th:src="@{images/icon/icon3.png}" alt=""/></div>
                        <span>笔记</span>
                    </li>
                    <li>
                        <div class="icon"><img th:src="@{images/icon/icon4.png}" alt=""/></div>
                        <span>文件</span>
                    </li>
                    <li>
                        <div class="icon"><img th:src="@{images/icon/icon5.png}" alt=""/></div>
                        <span>音乐</span>
                    </li>
                    <li>
                        <div class="icon"><img th:src="@{images/icon/icon6.png}" alt=""/></div>
                        <span>标签</span>
                    </li>
                </ul>
            </div>
        </div>

        <!--聊天窗口-->
        <div class="talk_window">
            <div class="windows_top">
                <div class="windows_top_box">
                    <span id="friend_nickName">&nbsp;</span>
                    <ul class="window_icon">
                        <li><a href=""><img th:src="@{images/icon/icon7.png}"/></a></li>
                        <li><a href=""><img th:src="@{images/icon/icon8.png}"/></a></li>
                        <li><a href=""><img th:src="@{images/icon/icon9.png}"/></a></li>
                        <li><a href=""><img th:src="@{images/icon/icon10.png}"/></a></li>
                    </ul>

                </div>
            </div>
            <!--聊天内容-->
            <div class="windows_body" id="talkbody">
                <div class="office_text" style="height: 100%;">
                    <ul class="content" id="chatbox">

                    </ul>
                </div>
            </div>

            <div class="windows_input" id="talkbox">
                <div class="input_icon">
                    <a class="trigger" href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                <div class="input_box">
                    <textarea name="" rows="" cols="" id="input_box"></textarea>
                    <button id="send" onclick="send()">发送（S）</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var serverIp = "[[${serverIp}]]";
</script>
</body>
</html>
